<!--
 * @Author: Wangtao
 * @Date: 2022-08-26 11:49:21
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-21 10:15:53
-->
<template>
  <div class="call-nav-box mc-call-variable">
    <div class="call-nav-title">呼叫中心</div>
    <div class="call-nav-con">
      <div
        :class="[currentPath === item.routePath ? 'active' : '']"
        class="call-nav-item"
        v-for="(item, index) in pageList"
        :key="index"
        @click="toPath(item)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'callNav',
  components: {},
  // ----------------生命周期-----------------------
  setup() {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      currentPath: '',
      pageList: [
        // {
        //   title: '个人统计'
        // },
        {
          title: '通话记录',
          routePath: '/app/call_record'
        }
        // {
        //   title: '外呼记录'
        // },
        // {
        //   title: '通话监控'
        // }
      ],
      toPath(item: any) {
        if (item.routePath) {
          router.push({
            path: item.routePath
          })
        } else {
          ElMessage.warning('功能开发中~')
        }
      }
    })
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    watch(
      () => route.path,
      (path) => {
        state.currentPath = path
      },
      { immediate: true }
    )
    // ----------------调用方法-----------------------
    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.call-nav-box
  flex-grow 0
  flex-shrink 0
  box-sizing border-box
  background-color var(--mc-call-card-bg)
  .call-nav-title
    padding 16px 20px 16px
    font-weight 500
    font-size 16px
    color var(--mc-call-card-font-color)
    border-bottom 1px solid var(--mc-gray3-color)
    box-sizing border-box
  .call-nav-con
    padding 10px 12px 0
    box-sizing border-box
  .call-nav-item
    font-weight 400
    font-size 14px
    margin-bottom 14px
    padding 6px 8px 6px
    cursor pointer
    border-radius 5px
  .call-nav-item:hover
    background linear-gradient(0deg, rgba(30, 99, 245, 0.1), rgba(30, 99, 245, 0.1)), #FFFFFF
  .active
    background linear-gradient(0deg, rgba(30, 99, 245, 0.1), rgba(30, 99, 245, 0.1)), #FFFFFF
</style>
